<template>
  <div class="notice">
    <detail-section title="预定须知">
      <div class="notice-inner">
        <template v-for="(item, index) in orderRules.orderRules" :key="index">
          <div class="item">
            <div class="title">{{ item.title }}</div>
            <div class="desc">{{ item.introduction }}</div>
          </div>
        </template>
      </div>
    </detail-section>
  </div>
</template>

<script setup>
  import DetailSection from "@/components/detail-section/detail-section.vue"

  const props = defineProps({
    orderRules: {
      type: Object,
      default: () => ({})
    }
  })


</script>

<style lang="less" scoped>
  .notice-inner {
    font-size: 12px;
    color: #333;
    padding-bottom: 20px;

    .item {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin-top: 20px;

      .title {
        color: #666;
        width: 65px;
      }
    }
  }
</style>